<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";
import { Secret, Pod } from "@/views/domain/kubeHud/api/k8s/types";
import ResourceDetailsContainer from "../components/ResourceDetailsContainer.vue";
import KDescGroup from "../components/KDescGroup.vue";
import KDescRow from "../components/KDescRow.vue";
import InTagLine from "../components/InTagLine.vue";
import MetadataDescription from "../components/MetadataDescription.vue";
import KPodList from "../pod/widgets/KPodList.vue";
import PodContainerStatusCardFlow from "../pod/widgets/PodContainerStatusCardFlow.vue";

const { secretRepo } = useK8SApi();

type Prop = {
  name?: string;
  namespace?: string;
};

const route = useRoute();
const props = defineProps<Prop>();
const model = ref<Secret>();
const loading = ref(false);

const secretShow = ref<{ [key: string]: boolean | undefined }>({});

const query = reactive<{
  name?: string;
  namespace?: string;
}>({});

const reload = async () => {
  loading.value = true;

  const { ok, data } = await secretRepo.getSecretDetail({
    namespace: query.namespace,
    name: query.name
  });

  if (ok) {
    model.value = data;
  }

  loading.value = false;
};

onMounted(() => {
  query.name = (route.query?.name as any) ?? props.name;
  query.namespace = (route.query?.namespace as any) ?? props.namespace;
  reload();
});
</script>

<template>
  <ResourceDetailsContainer
    v-if="model"
    :title="'Secret: ' + model?.metadata?.name"
  >
    <MetadataDescription :metadata="model.metadata" />

    <KDescGroup title="Data">
      <KDescRow
        v-for="(value, key) in model?.data"
        :key="key"
        :label="`${key}`"
        :flex="false"
      >
        <div>
          <el-button
            :icon="secretShow[key] ? 'View' : 'Hide'"
            text
            @click="secretShow[key] = !secretShow[key]"
          />
          <el-text v-if="secretShow[key]">{{ value }}</el-text>
        </div>
      </KDescRow>
    </KDescGroup>
  </ResourceDetailsContainer>
  <div v-else v-loading="true" />
</template>
<style lang="scss" scoped></style>
